<template>
  <div class="preview-view common-page">
    <div class="video-container">
      <split-screen :num="pageActive"></split-screen>
    </div>
    <div class="footer-bar">
      <div class="page-view">
        <div
          v-for="(item, index) in pageList"
          :key="index"
          class="page-item"
          :class="{ active: pageActive === item }"
          @click="handleClickPageItem(item)"
        >
          {{ item }}
        </div>
      </div>
      <div class="options">
        <t-button class="common-button" theme="primary" @click="save">
          <template #icon><svg-icon class="icon" name="video-save"></svg-icon> </template>
          保存配置
        </t-button>
        <t-button class="common-button" variant="outline" @click="reset">
          <template #icon><svg-icon class="icon" name="video-reset"></svg-icon> </template>
          配置重置
        </t-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import SplitScreen from './components/SplitScreen.vue';

const pageList = [1, 4];
const pageActive = ref(1);

const handleClickPageItem = (num: number) => {
  pageActive.value = num;
};

const save = () => {
  //   to do
};

const reset = () => {
  //   to do
};
</script>

<style lang="less" scoped>
.preview-view {
  .video-container {
    height: calc(100% - 64px - 24px);
    width: 100%;
    margin-bottom: 24px;
  }

  .footer-bar {
    height: 64px;
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .page-view {
      display: flex;
      gap: 8px;

      .page-item {
        width: 32px;
        height: 32px;
        background: #f0f2f4;
        border: 1px solid #a5b4cb;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #333;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }

        &.active {
          color: #fff;
          background: var(--td-brand-color);
        }
      }
    }
  }
}
</style>
